<template>
  <div class="node-warp">
    <div class="node-warp__list">
      <div class="node-warp__list-start node-warp__list-item">
        <span class="node-warp__list-item-header start">发起人</span>
        <div class="node-warp__list-item-body">所有人</div>
      </div>
      <AddNode :node-list.sync="nodeList" @onAdd="handleAdd" />

      <div v-for="(item, index) in nodeList" :key="index">
        <div
          class="node-warp__list-approver node-warp__list-item"
          @click.stop="handleOpenDrawer(item, index)"
        >
          <div v-if="item.error" class="node-warp__list-item--error">
            <i class="el-icon-warning error-icon" />
          </div>

          <span class="node-warp__list-item-header approver">
            <span class="header-left" @click.stop="handleInputNodeName(index)">
              <i class="el-icon-s-check" style="margin-right: 5px;" />

              <input
                v-if="index === currentItem.index && isEdit"
                ref="inputRef"
                v-model="item.nodeName"
                v-focus
                @blur="handleInputBlur"
                @focus="$event.currentTarget.select()"
              >
              <span v-else class="node-name">{{ item.nodeName }}</span>

            </span>
            <i
              class="el-icon-close remove"
              style="margin-right: 5px;"
              @click="handleRemoveApproval(item, index)"
            />
          </span>
          <div class="node-warp__list-item-body">
            <div style="display: flex; justify-content: space-between; align-items: center">
              <span v-if="item.approver.length <= 0 || !item.approver" style="color: #bfbfbf;">请选择审核人</span>
              <span v-else>已选择</span>
              <i class="el-icon-arrow-right icon" />
            </div>
          </div>
        </div>
        <AddNode :node-list="nodeList" @onAdd="handleAdd" />
      </div>
      <div class="node-warp__list--end">
        <div class="end-icon" />
        <span style="margin-top: 10px; font-size: 13px">流程结束</span>
      </div>

      <ApprovalFlowDrawer
        ref="approvalFlowDrawerRef"
        :show.sync="show"
        :form-data="currentItem.item"
        @onSubmit="handleSubmit"
      />

    </div>

  </div>
</template>
<script>
import AddNode from '@/views/approvalFlow/components/addNode.vue'
import ApprovalFlowDrawer from '@/views/approvalFlow/components/approvalFlowDrawer.vue'
import { deepClone } from '@/utils'
export default {
  name: '',
  components: {
    AddNode,
    ApprovalFlowDrawer
  },
  props: {
    nodeList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      list: [],
      show: false,
      currentItem: {
        item: {},
        index: null
      },
      errorNum: 0,
      isEdit: false
    }
  },
  computed: {

  },
  watch: {
    nodeList: {
      handler: function(n, o) {
        this.list = n
      },
      immediate: true
    },
    list() {
      this.$emit('update:nodeList', this.list)
    }
  },
  methods: {
    handleAdd(e) {
      this.list.push(e)
      this.showErrorIcon(this.list)
    },
    handleRemoveApproval(item, index) {
      this.list = this.list.splice(index, 1)
    },
    handleOpenDrawer(item, index) {
      this.show = true
      this.currentItem.item = deepClone(item)
      this.currentItem.index = index
      this.$refs.approvalFlowDrawerRef.clearValidate()
    },

    handleSubmit(e) {
      this.list[this.currentItem.index] = e
      this.currentItem = this.$options.data().currentItem
      this.showErrorIcon(this.list)
    },
    showErrorIcon(list) {
      let count = 0
      list.forEach(item => {
        const { nodeName, nodeType, approver } = item
        if (!nodeName || !nodeType || (Array.isArray(approver) && approver.length === 0) || !approver) {
          item.error = true
          count++
        } else {
          item.error = false
        }
      })
      this.errorNum = count
    },

    handleInputNodeName(index) {
      this.currentItem.index = index
      this.isEdit = true
    },

    handleInputBlur() {
      this.currentItem.index = null
      this.isEdit = false
    }
  }
}
</script>
<style lang="scss" scoped>
.node-warp {
  display: flex;
  justify-content: center;

  &__list {
    &-item {
      position: relative;
      z-index: 12;
      border-radius: 4px;
      width: 220px;
      min-height: 72px;
      background-color: #fff;
      cursor: pointer;
      box-sizing: border-box;
      &--error {
        position: absolute;
        right: -35px;
        .error-icon {
          font-size: 25px;
          color: #f56c6c;
        }
      }
      &-body {
        .icon {
          position: absolute;
          right: 10px;
          font-size: 18px;
        }
      }
      .remove {
        display: none;
      }
      &:hover {
        outline: 1px solid #1890ff;
        .header-left {
          .node-name {
            border-bottom-color: #fff;
          }
        }
        .remove {
          display: block;
        }
      }

      &:after {
        pointer-events: none;
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        border-radius: 4px;
        border: 1px solid transparent;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1);
      }
      &:before {
        content: "";
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 4px;
        border-style: solid;
        border-width: 8px 6px 4px;
        border-color: #cacaca transparent transparent;
        background: #f5f5f5;
        z-index: 0 !important;
      }
      &-header {
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 5px 16px;
        border-radius: 4px 4px 0 0;
        color: #fff;
        .header-left {
          display: flex;
          align-items: center;
          flex: 1;
          width: 100%;
          .node-name {
            border-bottom: 1px dashed transparent;
            transition: border-bottom-color .1s ease;
            //&:hover {
            //  border-bottom-color: #fff;
            //}
          }
        }
      }
      .start {
        background-color: #576a95;
      }
      .approver {
        background-color: #ff943e;
      }
      &-body {
        position: relative;
        font-size: 14px;
        padding: 16px;
        //padding-right: 30px;
      }

    }
    &-start:before {
      content: none;
    }
    &--end {
      //height: 30px;
      color: #b6b6b6;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .end-icon {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ccc;
      }
    }
  }
}
</style>
